<template>
  <div class="home">
    <Header></Header>
    <div class="h_center">
      <div class="main">
        <div class="main_left" style="font-size:21px">
          <div class="left_top">
            <ul>
              <li
                :class="active == tab.id?'on':''"
                v-for="(tab,index) in tabList"
                :key="index"
                @click="selected(tab.id,tab.path)"
                 >
                <div v-show="active == tab.id" class="on_line"></div>
                {{tab.title}}
              </li>
              <!-- <el-button v-if="realname == 'admin'">客户列表</el-button> -->
              <el-button @click="customerList" type="text" style="margin-left:30px" v-if="realname == 'admin'">客户列表</el-button>
            </ul>
          </div>
        </div>
        <div class="main_right" style="font-size:20px">
          <router-view/>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Header from "@/components/Header";
export default {
  name: "home",
  components: {
    Header
  },
  data() {
    return {
      tabList: [
        { id: 1, title: "首页", path: "/home/index" },
        { id: 2, title: "关联客户", path: "/home/relation" },
        // { id: 3, title: "有效订单", path: "/home/order" },
        // { id: 4, title: "推广记录", path: "/home/promotionRecord" },
        
      ],
      tablList1:{ id: 4, title: "客户列表", path: "/home/customerList" },
      active: null,
      realname:'',
    };
  },
  watch: {
    $route(to, from) {
      this.active = to.meta.id;
    }
  },
  created() {
    this.active = this.$route.meta.id;
    this.realname = localStorage.getItem("realname")
  },
  methods: {
    selected(id, url) {
      this.active = this.$route.meta.id;
      this.$router.push({
        path: url
      });
    },
    customerList(){
      this.$router.push("/home/customerList")
    },
  }
};
</script>

<style lang="less" scoped>
.home {
  width: 100%;
  height: 100vh;
  background-color: #f2f2f2;
  .h_center{
    width: 100%;
    height: 85vh;
    padding-bottom:50px; 
    .main {
      height: 100%;
      width: 1200px;
      margin: 0 auto;
      margin-top:30px;
      display: flex;
      background: #fff;
      box-shadow: 1px 1px 10px 1px #ccc;
      
      .main_left {
        flex: 0.13;
        height: 100%;
        & > div {
          width: 100%;
          height: 300px;
        }
        .type {
          padding: 0 10px;
          & > div {
            height: 59px;
            line-height: 59px;
          }
          .icon-qian,
          .icon-geren5 {
            color: #4be0ee;
            margin-left: 15px;
            font-size: 25px;
            position: relative;
            top: 1.5px;
          }
          span {
            font-size: 14px;
            color: #abafb3;
            margin-left: 7px;
          }
        }
        ul {
          margin: 0;
          padding: 0;
          li {
            cursor: pointer;
            font-size: 14px;
            line-height: 60px;
            text-indent: 30px;
            position: relative;
            .on_line {
              position: absolute;
              height: 100%;
              width: 3px;
              background: #409eff;
            }
          }
          .on {
            color: #409eff !important;
          }
        }
      }
      .main_right {
        display: inline-block;
        flex: 0.87;
        height: 100%;
        padding: 20px 20px 0 0;
        box-sizing: border-box;
        overflow: auto;
      }
      .main_right::-webkit-scrollbar { width: 0 !important }
    }
  }
}
</style>
